<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>不可回购筛选</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            width: 100%;
            height: auto;
            background-color: rgba(0, 0, 0, 0.4);
            font-family: PingFangSC-Regular, sans-serif;
            color: #333333;
            font-size: 0.28rem;
            position: relative;
        }

        .typeChoose {
            width: 100%;
            height: auto;
            box-sizing: border-box;
            background-color: #fff;
            position: fixed;
            bottom: 0rem;
            left: 0;
            border-radius: 0.3rem 0.3rem 0 0;
            box-sizing: border-box;
            padding-bottom: 0.2rem;
        }

        .typeChoose div {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            padding-left: 0.3rem;
            box-sizing: border-box;
        }

        .typeChoose div p {
            width: 100%;
        }

        .typeChoose div p:first-of-type {
            height: 0.95rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .typeChoose div p:last-of-type {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 0.3rem;
        }

        .typeChoose div p:last-of-type span {
            height: 0.56rem;
            width: 1.36rem;
            display: flex;
            display: -webkit-flex;
            font-size: 0.24rem;
            align-items: center;
            justify-content: center;
            color: #999999;
            border: 1px solid #e4e4e4;
            border-radius: 0.1rem;
            margin-right: 0.35rem;
        }

        .typeChoose div p:last-of-type span:first-of-type {
            background-color: #ffd203;
            color: #181818;
        }

        button {
            border: none;
            outline: none;
            background-color: #fff;
            padding: 0.15rem 0.3rem;
        }

        .showButton {
            width: 100%;
            height: 0.96rem;
            box-sizing: border-box;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.39rem 0 0.28rem;
            font-size: 0.28rem;
            color: #898989;
        }

        .showButton button:last-of-type {
            color: #ffd203;
        }

        .typeChoose ul {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .typeChoose ul li {
            width: 100%;
            height: 0.88rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: bold;
        }

        .typeChoose ul li img {
            width: 0.36rem;
            margin-right: 0.17rem;
        }

        .nochoose {
            background-color: #ffffff;
            color: rgba(189, 191, 194, 1);
        }

        .chooseThis {
            background-color: rgba(243, 243, 243, 1);
            color: #262626;
        }
    </style>
</head>

<body id="test">
    <div class="typeChoose">
        <p class="showButton">
            <button id="calanceButton" style="font-size: 0.26rem;color:#898989;">
                取消
            </button>
            <button id="sureChoose" style="font-size: 0.26rem;">
                确定
            </button>
        </p>
        <ul class="bankChoose">
            <li class="nochoose chooseThis" data-value="BANK_TRANSFER" data-name="银行卡转账">
                <img src="../../image/iconblkhx.png"> <span>银行卡转账</span>
            </li>
            <li class="nochoose" data-value="ALIPAY_TRANSFER" data-name="支付宝转账">
                <img src="../../image/iconaxglnj.png"> <span>支付宝转账</span>
            </li>
        </ul>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var thisValue = {
            methodPay: "BANK_TRANSFER",
            imgUrl: "../../image/iconblkhx.png",
            itemName: "银行卡转账"
        }
        $(".bankChoose li").click(function () {
            $(this).removeClass("nochoose").addClass("chooseThis").siblings().addClass("nochoose").removeClass("chooseThis");
            thisValue.methodPay = $(this).attr("data-value");
            thisValue.itemName = $(this).attr("data-name");
            if (thisValue.methodPay == "BANK_TRANSFER") {
                thisValue.imgUrl = "../../image/iconblkhx.png";
            } else {
                thisValue.imgUrl = "../../image/iconaxglnj.png";
            }
        })
        $("#calanceButton").click(function () {
            app.closeF("publictransfer_daliog");
        })
        $("#sureChoose").click(function () {
            app.trigger("chooseItem", thisValue);
            app.closeF("publictransfer_daliog");
        })
    }
</script>

</html>